<template>
	<view @click="showDetail" :class="`tag ${props.type}`">{{ props.tag }}</view>

</template>

<script setup>
	import {
		ref
	} from 'vue'
	const props = defineProps({
		tag: {
			type: String,
			default: ''
		},
		type: {
			type: String,
			default: 'normal'
		},
		context: {
			type: String,
			default: ''
		}
	})
	const showDetail = () => {
		if (props.context) {
			uni.showModal({
				content: props.context,
				showCancel: false
			});
		}
	}
</script>

<style lang="less" scoped>
	.tag {
		padding: 6rpx;
		border-radius: 20rpx;
		text-align: center;
		font-size: 28rpx;
		display: inline;

		&.normal {
			background-color: #f0f9eb;
			border: #71c647 1rpx solid;
			color: #67c23a;
		}

		&.warn {
			background-color: #fdf6ec;
			border: #f3d19e 1rpx solid;
			color: #e6a23c;
		}

		&.danger {
			background-color: #fef0f0;
			border: #f56c6c 1rpx solid;
			color: #fab6b6;
		}
	}
</style>